<template>
  <div class="tag-management">
    <el-card shadow="never">
      <div class="header">
        <el-button type="primary" @click="handleCreate">新增标签</el-button>
      </div>
      
      <el-table :data="tags" style="width: 100%">
        <el-table-column prop="tagId" label="ID" width="80"></el-table-column>
        <el-table-column prop="tagName" label="标签名称"></el-table-column>
        <el-table-column prop="usageCount" label="使用次数" width="120"></el-table-column>
        <el-table-column prop="isHot" label="热门" width="100">
          <template #default="{ row }">
            <el-tag v-if="row.isHot" type="success">是</el-tag>
            <el-tag v-else type="info">否</el-tag>
            <el-switch
              v-model="row.isHot"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="(val) => toggleHotStatus(row.tagId, val)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button size="mini" @click="handleEdit(row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row.tagId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 标签编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="currentTag" label-width="100px">
        <el-form-item label="标签名称">
          <el-input v-model="currentTag.tagName"></el-input>
        </el-form-item>
        <el-form-item label="热门标签">
          <el-switch v-model="currentTag.isHot"></el-switch>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="currentTag.description" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitTag">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getTags, createTag, updateTag, deleteTag } from '@/api/tag';

export default {
  setup() {
    const tags = ref([]);
    const dialogVisible = ref(false);
    const isEditMode = ref(false);
    const currentTag = ref({
      tagId: null,
      tagName: '',
      description: '',
      isHot: false
    });
    
    const dialogTitle = ref('');

    // 获取标签列表
    const fetchTags = async () => {
      const res = await getTags();
      tags.value = res.data.data;
    };

    // 新增：切换热门状态
    const toggleHotStatus = async (id, isHot) => {
      try {
        await toggleTagHotStatus(id, isHot);
        ElMessage.success('热门状态更新成功');
        // 更新本地数据状态
        const tag = tags.value.find(t => t.tagId === id);
        if (tag) tag.isHot = isHot;
      } catch (error) {
        ElMessage.error('热门状态更新失败');
        // 如果更新失败，恢复原始状态
        const tag = tags.value.find(t => t.tagId === id);
        if (tag) tag.isHot = !isHot;
      }
    };

    // 在组件挂载时加载数据
    onMounted(() => {
      fetchTags();
    });

    // 打开创建对话框
    const handleCreate = () => {
      isEditMode.value = false;
      dialogTitle.value = '创建标签';
      currentTag.value = {
        tagId: null,
        tagName: '',
        description: '',
        isHot: false
      };
      dialogVisible.value = true;
    };

    // 打开编辑对话框
    const handleEdit = (tag) => {
      isEditMode.value = true;
      dialogTitle.value = '编辑标签';
      currentTag.value = { ...tag };
      dialogVisible.value = true;
    };

    // 提交标签
    const submitTag = async () => {
      if (isEditMode.value) {
        await updateTag(currentTag.value);
        ElMessage.success('标签更新成功');
      } else {
        await createTag(currentTag.value);
        ElMessage.success('标签创建成功');
      }
      dialogVisible.value = false;
      fetchTags();
    };

    // 删除标签
    const handleDelete = (id) => {
      ElMessageBox.confirm('确定要删除这个标签吗？', '警告', {
        type: 'warning'
      }).then(async () => {
        await deleteTag(id);
        ElMessage.success('标签删除成功');
        fetchTags();
      }).catch(() => {});
    };

    onMounted(() => {
      fetchTags();
    });

    return {
      tags,
      dialogVisible,
      currentTag,
      dialogTitle,
      handleCreate,
      handleEdit,
      handleDelete,
      submitTag
    };
  }
};
</script>

<style scoped>
.header {
  margin-bottom: 20px;
}
</style>